@use "sass:color";

@forward "sass:color";

@mixin variables {
  // 颜色
  $--color-red: #fc625d;
  $--color-warn: #fcbc40;
  $--color-success: #34c749;

  // 文字
  $--color-text: #1d2129;
  $--color-text-1: #4e5969;
  $--color-text-2: #86909c;
  $--color-text-3: #c9cdd4;
  $--color-text-4: #f2f3f5;

  // 文字大小
  $--font-size-1: 14px;
  $--font-size-2: 16px;
  $--font-size-3: 18px;
  $--font-size-4: 20px;
  $--font-size-5: 22px;
  $--font-size-6: 24px;
  $--font-size-7: 26px;
  $--font-size-8: 28px;
  $--font-size-9: 30px;
  $--font-size-10: 32px;

  //.mt-1 => margin top
  //spacing
  $spacing-base-size: 1em;

  // 变亮值
  $--light-shadow: 2%;

  // 背景色
  $--color-light-bg: #fff;
  $--color-light-bg-1: #fafafc;
  $--color-light-bg-1-shallow: color.adjust($--color-light-bg-1, $lightness: $--light-shadow);
  $--color-light-bg-2: #f2f3f5;
  $--color-light-bg-2-shallow: color.adjust($--color-light-bg-2, $lightness: $--light-shadow);
  $--color-light-bg-3: #e5e6eb;
  $--color-light-bg-3-shallow: color.adjust($--color-light-bg-3, $lightness: $--light-shadow);
  $--color-light-bg-4: #e3e3e4;
  $--color-light-bg-4-shallow: color.adjust($--color-light-bg-4, $lightness: $--light-shadow);
  $--color-light-bg-5: #bebebe;
  $--color-light-bg-5-shallow: color.adjust($--color-light-bg-5, $lightness: $--light-shadow);

  // 最大宽度
  $--max-width: 1920px;

  // 毛玻璃
  $--filter-color-login-dark: rgba(35, 35, 36, 0.7);
  $--filter-color-login-dark-shallow: rgba(35, 35, 36, 0.3);
  $--filter-color-login-light: rgba(240, 240, 240, 0.7);
  $--filter-color-login-light-shallow: rgba(240, 240, 240, 0.3);


  // 阴影
  $--border-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

@include variables;